<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!--  -->
<tiles:insertDefinition name="baseLayout">

<tiles:putAttribute name="head" type="String">
<sx:head parseContent="true" />

<style type='text/css'>
<!--
	button {
		border: 1px solid #333333;
		height: 22px;
		font: Sans-serif, Verdana;
		font-size: 100%;
	}
	
	.btnAction {
		border: 1px solid #333333;
		height: 22px;
		font: Sans-serif, Verdana;
		font-size: 100%;
	}
	
	.textbox-inline {
		border-bottom: 1px solid #888888;
	}
	.numbox-inline {
		border-bottom: 1px solid #888888;
		text-align: right;
	}
	.seqbox-inline {
		border-bottom: 1px solid #888888;
		text-align: center;
	}
	
	#tblShiftTransDetail tbody td {
		height: 25px;
		padding-left: 5px;
		padding-right: 5px;
	}
-->
</style>
<link rel="stylesheet" type="text/css" href="css/frame.css" media="screen"></link>
<link rel="stylesheet" href="css/demo_page.css" media="screen"></link>
<link rel="stylesheet" href="css/demo_table.css" media="screen"></link>

<script type="text/javascript" src="js/popcalendar.js"></script>
<script type="text/javascript" src="js/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="js/yui/json/json-min.js"></script>
<script type="text/javascript">

	var startMnlIndx = 0;	// Keep start index of manual adding
	
	function getCurrDate(){
		var currentTime = new Date();
		var month = currentTime.getMonth() + 1;
		var day = currentTime.getDate();
		var year = currentTime.getFullYear();
		return (day<10?"0":"") + day + "/" + (month<10?"0":"") + month + "/" + year;
	}
	function getCurrTime(objId){
		var callback = {
			success: function(o){
                var objDT;
                try{
                    var jsonData = YAHOO.lang.JSON.parse(o.responseText);
                    objDT = eval("("+ jsonData.object +")");
                    var hh = objDT.hour;
                    var mm = objDT.minute;
                    document.getElementById(objId).value = (hh<10?"0":"") + hh + ":" + (mm<10?"0":"") + mm;
                } catch(e){
					alert(e.message);
				}
	        }, failure: function(o){}
		};
	    var params = "";
	    var conn = YAHOO.util.Connect.asyncRequest("POST", "${pageContext.request.contextPath}/shiftControl_getDateTime.action?" + params, callback);
		/*var currentTime = new Date();
		var hh = currentTime.getHours();
		var mm = currentTime.getMinutes();
		return (hh<10?"0":"") + hh + ":" + (mm<10?"0":"") + mm;*/
	}

	function numberAndDotOnly(event){
        var keyAble = false;
        try{
           var key = event.keyCode;
           if( (key == 46) || (key > 47 && key < 58) )
              keyAble = true;
           else
              keyAble = false;
        } catch(err){
            throw new Error(" error in sub numberAndDotOnly function() cause = " + err.message);
        }
        return keyAble;
    }
	function numberAndColonOnly(event){
		var keyAble = false;
		try{
			var key = event.keyCode;
			if( (key == 58) || (key > 47 && key < 58) ){
				keyAble = true;
			}
        } catch(err){
            throw new Error(" error in sub numberAndColonOnly function() cause = " + err.message);
        }
        return keyAble;
    }

	function changeInOutType(obj){
		var currRow = obj.parentNode.parentNode;
		var cashInObj = currRow.cells(7).firstChild;
		var cashOutObj = currRow.cells(8).firstChild;
		if(obj.value == "IN"){
			cashInObj.readOnly = false;
			cashOutObj.readOnly = true;
			cashOutObj.value = "";
			cashInObj.focus();
		} else{
			cashInObj.readOnly = true;
			cashOutObj.readOnly = false;
			cashInObj.value = "";
			cashOutObj.focus();
		}
	}

	function manageCashInOut(){
		//var currRow = obj.parentNode.parentNode;
		//var indx = currRow.rowIndex;
		var tblShiftTransDetail = document.getElementById("tblShiftTransDetail");
		var theRows = tblShiftTransDetail.rows;
		
		var sumCashIn = 0.00;
		var sumCashOut = 0.00;
		for(var i=1; i<startMnlIndx; i++){
			var cashIn = theRows[i].cells(7).innerHTML;
			var cashOut = theRows[i].cells(8).innerHTML;
			if(cashIn != ""){
				sumCashIn = parseFloat(sumCashIn) + parseFloat(cashIn);
			} else if(cashOut != ""){
				sumCashOut = parseFloat(sumCashOut) + parseFloat(cashOut);
			}
		}
		
		var rowSize = theRows.length - 2;
		var sumBalance = 0.00;
		for(var i=startMnlIndx; i<rowSize; i++){
			var prvBalance = theRows[i-1].cells(9).innerHTML;
			var cashIn = theRows[i].cells(7).firstChild.value;
			var cashOut = theRows[i].cells(8).firstChild.value;
			if(cashIn != ""){
				sumCashIn = parseFloat(sumCashIn) + parseFloat(cashIn);
				sumBalance = parseFloat(prvBalance) + parseFloat(cashIn);
			} else if(cashOut != ""){
				sumCashOut = parseFloat(sumCashOut) + parseFloat(cashOut);
				sumBalance = parseFloat(prvBalance) - parseFloat(cashOut);
			} else{
				sumBalance = parseFloat(prvBalance);
			}
			theRows[i].cells(9).innerHTML = sumBalance;
		}
		document.getElementById("tdSumCashIn").innerHTML = sumCashIn;
		document.getElementById("tdSumCashOut").innerHTML = sumCashOut;
		document.getElementById("tdSumBalance").innerHTML = sumBalance;
	}
	
	function addGlAdjustRow(){
	    var spnInOutType = document.getElementById("spnInOutType");
	
	    var tblShiftTransDetail = document.getElementById("tblShiftTransDetail");
	    var rowCount = tblShiftTransDetail.rows.length - 1;
	    if(startMnlIndx == 0){
	    	startMnlIndx = (rowCount-1);
	    }
	    
	    var tBody = tblShiftTransDetail.getElementsByTagName('tbody')[0];
	    var newTR = document.createElement('tr');
	    newTR.bgColor = "#FFFFFF";
	
	    var newTD1 = document.createElement('td');
	    newTD1.setAttribute("align", "center");
	    newTD1.setAttribute("height", "26");
	    newTD1.innerHTML = "<input type='text' name='lineNumStr' value='" + (rowCount-1) + "' size='1' class='seqbox-inline' readonly>";
	    newTR.appendChild(newTD1);
	
	    var newTD2 = document.createElement('td');
	    newTD2.setAttribute("align", "left");
	    newTD2.innerHTML = "<input type='text' name='transStr' size='13' class='textbox-inline'>";
	    newTR.appendChild(newTD2);
	
	    var newTD3 = document.createElement('td');
	    newTD3.setAttribute("align", "left");
	    newTD3.innerHTML = "<input type='text' name='descStr' size='25' maxlength='255' class='textbox-inline'>";
	    newTR.appendChild(newTD3);
	
	    var newTD4 = document.createElement('td');
	    newTD4.setAttribute("align", "center");
	    newTD4.innerHTML = "<input type='text' id='d" + (rowCount-1) + "' name='dateStr' value='" + getCurrDate() + "'"
	    				 + " size='7' maxlength='10' class='seqbox-inline'> "
	    				 + "<img style='cursor:hand' src='images/calendar.gif'"
	    				 + " onclick='popUpCalendar(this,document.getElementById(\"d" + (rowCount-1) + "\"),\"dd/mm/yyyy\",dObj,mObj,yObj,\"right\")'>";
	    newTR.appendChild(newTD4);
	    
	    var newTD5 = document.createElement('td');
	    newTD5.setAttribute("align", "center");
	    newTD5.innerHTML = "<input type='text' id='t" + (rowCount-1) + "' name='timeStr' onkeypress='return numberAndColonOnly(event)' size='5' maxlength='5' class='seqbox-inline'>";
	    newTR.appendChild(newTD5);
	    
	    var newTD6 = document.createElement('td');
	    newTD6.setAttribute("align", "center");
	    newTD6.innerHTML = spnInOutType.innerHTML;
	    newTR.appendChild(newTD6);
	
	    var newTD7 = document.createElement('td');
	    newTD7.setAttribute("align", "center");
	    newTD7.innerHTML = '<s:property value="#session.SUserLogin.displayName" />';
	    newTR.appendChild(newTD7);
	
	    var newTD8 = document.createElement('td');
	    newTD8.setAttribute("align", "right");
	    newTD8.innerHTML = "<input type='text' name='cashInStr' onblur='manageCashInOut()' onkeypress='return numberAndDotOnly(event)' size='10' class='numbox-inline'>";
	    newTR.appendChild(newTD8);
	
	    var newTD9 = document.createElement('td');
	    newTD9.setAttribute("align", "right");
	    newTD9.innerHTML = "<input type='text' name='cashOutStr' onblur='manageCashInOut()' onkeypress='return numberAndDotOnly(event)' size='10' readonly='true' class='numbox-inline'>";
	    newTR.appendChild(newTD9);
	
	    var newTD10 = document.createElement('td');
	    newTD10.setAttribute("align", "right");
	    newTD10.innerHTML = "0.00";
	    newTR.appendChild(newTD10);
	
	    var newTD11 = document.createElement('td');
	    newTD11.setAttribute("align", "center");
	    newTD11.innerHTML = "Manual";
	    newTR.appendChild(newTD11);
		
	    var newTD12 = document.createElement('td');
	    newTD12.setAttribute("align", "center");
	    newTD12.innerHTML = "<input type='button' value='Del' onclick='deleteRow(this.parentNode.parentNode.rowIndex)' class='btnAction'>";
	    newTR.appendChild(newTD12);
		
	    tBody.appendChild(newTR);

	    getCurrTime("t"+(rowCount-1));
	}
	
	function deleteRow(i){
        document.getElementById("tblShiftTransDetail").deleteRow(i);
        var rows = document.getElementById('tblShiftTransDetail').rows;
        var rowSize = rows.length - 2;
        for(i=startMnlIndx; i<rowSize; i++){
            var cols = rows[i].cells;
            cols[0].innerHTML = "<input type='text' name='lineNumStr' value='" + i + "' size='1' class='seqbox-inline' readonly>";
        }
        manageCashInOut();
    }

    function deleteSelectedRow(dtId, lnNum){
    	window.location.href = "${pageContext.request.contextPath}/shiftControl_deleteRow.action?trnDt.shiftTransDtId=" + dtId + "&trnDt.lineNum=" + lnNum;
	}

	function validateData(form){
		if(isEmptyValue(form, "transStr")){
			alert("Please input Transaction !");
			return false;
		}
		if(isEmptyValue(form, "descStr", "Description")){
			alert("Please input Description !");
			return false;
		}
		if(isEmptyValue(form, "dateStr", "Date")){
			alert("Please input Date !");
			return false;
		}
		if(isEmptyValue(form, "timeStr")){
			alert("Please input Time !");
			return false;
		}

		var inoutTypeObjs = form.elements["inoutTypeStr"];
		var n = form.elements["cashInStr"].length;
		if(n){
			for(var i=0; i<n; i++){
				if(inoutTypeObjs[i+1].value == "IN"){
					if(form.elements["cashInStr"][i].value == ""){
						alert("Please input Cash In !");
						form.elements["cashInStr"][i].focus();
						return false;
					}
				} else{
					if(form.elements["cashOutStr"][i].value == ""){
						alert("Please input Cash Out !");
						form.elements["cashOutStr"][i].focus();
						return false;
					}
				}
			}
		} else{
			if(inoutTypeObjs[1].value == "IN"){
				if(form.elements["cashInStr"].value == ""){
					alert("Please input Cash In !");
					form.elements["cashInStr"].focus();
					return false;
				}
			} else{
				if(form.elements["cashOutStr"].value == ""){
					alert("Please input Cash Out !");
					form.elements["cashOutStr"].focus();
					return false;
				}
			}
		}
		//isEmptyValue("cashInStr")
		return true;
	}
	function isEmptyValue(form, objName){
		try{
			var n = form.elements[objName].length;
			if(n){
				for(var i=0; i<n; i++){
					if(form.elements[objName][i].value == ""){
						form.elements[objName][i].focus();
						return true;
					}
				}
			} else{
				if(form.elements[objName].value == ""){
					form.elements[objName].focus();
					return true;
				}
			}
		} catch(e){
			//alert("Have error : " + e.message);
			return true;
		}
		return false;
	}

	function closeShift(){
		if(confirm("Would you like to close shift ?")){
			window.location.href = 'shiftControl_closeShift.action';
		}
	}

	function withdrawCash(){
		
	}

</script>
</tiles:putAttribute>

<tiles:putAttribute name="body" type="String">

<br>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr>
	<td align="right" style="padding-right: 15px">
		Current Date : &nbsp; <font color="blue"><s:date name="%{new java.util.Date()}" format="dd / MM / yyyy HH:mm" /></font>
	</td>
</tr>
<tr>
	<td id="tdLeft" width="99%" valign="top" style="padding-left: 5px">
		<span style="text-align: center; vertical-align: middle; width: 100%; height: 50px">
			&nbsp; <font color="blue"><s:actionmessage/></font>
			&nbsp; <font color="red"><s:actionerror/></font>
		</span>
		<s:form action="shiftControl_save.action" onsubmit="return validateData(this)" method="post" theme="simple">
		<s:token/>
		<input type="hidden" size="2" id="dObj" />
        <input type="hidden" size="2" id="mObj" />
        <input type="hidden" size="4" id="yObj" />
		<table width="99%" align="center" cellpadding="0" cellspacing="1">
		<tr>
			<td height="30px" bgcolor="#DDDDDD" style="padding-left: 5px;">Open Shift User :</td>
			<td colspan="4" bgcolor="#EEEEEE" style="border-top: 1px #DDDDDD solid; border-right: 1px #DDDDDD solid; padding-left: 5px;">
				<s:property value="shiftTrans.userShowName" />
			</td>
		</tr>
		<tr>
			<td height="30px" bgcolor="#DDDDDD" style="padding-left: 5px;">Counter :</td>
			<td bgcolor="#EEEEEE" style="padding-left: 5px;"><s:property value="shiftTrans.counterName" /></td>
			<td bgcolor="#DDDDDD" style="padding-left: 5px;">Shift # </td>
			<td colspan="2" bgcolor="#EEEEEE" style="padding-left: 5px; border-right: 1px #DDDDDD solid;">
				<s:property value="shiftTrans.shiftNum" />
			</td>
		</tr>
		<tr>
			<td width="80px" height="30px" bgcolor="#DDDDDD" style="padding-left: 5px;">Start Date :</td>
			<td width="240px" bgcolor="#EEEEEE" style="padding-left: 5px;">
				<!--s:property value="shiftTrans.shiftStartDatetime" /-->
				<s:date name="%{shiftTrans.shiftStartDatetime}" format="dd/MM/yyyy  HH:mm" />
			</td>
			<td width="120px" bgcolor="#DDDDDD" style="padding-left: 5px;">Status : </td>
			<td width="200px" bgcolor="#EEEEEE" style="padding-left: 5px;">
				<s:property value="shiftTrans.shiftStatus" />
			</td>
			<td bgcolor="#EEEEEE" style="padding-right: 8px; border-right: 1px #DDDDDD solid;" align="right">
				<s:if test='#session["S_SHIFT_CLOSED"] == "Y"'>
					<input type="button" value="   Add   " class="btnAction" disabled="disabled">
				</s:if>
				<s:else>
					<input type="button" value="   Add   " onclick="addGlAdjustRow()" style="border: 1px #555555 solid;">
				</s:else>
			</td>
		</tr>
		<tr>
			<td style="padding-top: 10px" align="center" colspan="5" width="100%">
				<span id="spnInOutType" style="display:none">
					<s:select name="inoutTypeStr" list="#{'IN':'IN', 'OUT':'OUT'}" value="IN" onchange="changeInOutType(this)" theme="simple"/>
				</span>
				<table id="tblShiftTransDetail" bgcolor="#CCCCCC" cellspacing="1">
				<thead>
				<tr style="background-image: url('images/gradtblhdr.gif')">
					<th width="45px" height="22">No.</th>
					<th width="120px">Transaction</th>
					<th width="200px">Description</th>
					<th width="110px">Date</th>
					<th width="75px">Time</th>
					<th width="70px">Type</th>
					<th width="80px">By User</th>
					<th width="115px">Cash In</th>
					<th width="115px">Cash Out</th>
					<th width="110px">Balance</th>
					<th width="80px">Source</th>
					<th width="40px">Del</th>
				</tr>
				</thead>
				<tbody>
				<s:set var="totalCashIn" value="%{0}" />
				<s:set var="totalCashOut" value="%{0}" />
				<s:set var="sumBalance" value="%{0}" />
				<s:iterator value="shiftTransDt">
				<tr bgcolor="#EEEEEE">
					<td align="center" height="25"><s:property value="lineNum" /></td>
					<td align="left"><s:property value="transName" /></td>
					<td align="left"><s:property value="transDesc" /></td>
					<td align="center"><s:date name="transDateTime" format="dd/MM/yyyy" /></td>
					<td align="center"><s:date name="transTime" format="HH:mm" /></td>
					<td align="center"><s:property value="inoutTypeName" /></td>
					<td align="center"><s:property value="byUserShowName" /></td>
					<td align="right">
						<s:if test='inoutTypeName == "IN" or inoutTypeName == "In"'>
							<s:text name="format.money">
							    <s:param name="value" value="transAmount"/>
							</s:text>
							<s:set var="totalCashIn" value="%{transAmount + #attr.totalCashIn}" />
						</s:if>
					</td>
					<td align="right">
						<s:if test='inoutTypeName == "OUT" or inoutTypeName == "Out"'>
							<s:text name="format.money">
							    <s:param name="value" value="%{transAmount*-1}"/>
							</s:text>
							<s:set var="totalCashOut" value="%{(transAmount*-1) + #attr.totalCashOut}" />
						</s:if>
					</td>
					<td align="right">
						<s:set var="sumBalance" value="%{#attr.sumBalance + transAmount}" />
						<s:text name="format.money">
						    <!--s:param name="value" value="accumTransAmount"/-->
						    <s:param name="value" value="sumBalance"/>
						</s:text>
					</td>
					<td align="center"><s:property value="sourceName" /></td>
					<!--td><input type="button" id="btn<s:property value='lineNum'/>" value="Edit"></td-->
					<td align="center">
						<s:if test='sourceName == "Manual"'>
							<input type="button" value="Del" class="btnAction"
								   onclick="deleteSelectedRow(<s:property value='shiftTransDtId' />, <s:property value='lineNum'/>)">
						</s:if>
						<s:else>&nbsp;</s:else>
					</td>
				</tr>
				</s:iterator>
				</tbody>
				<tbody>
				<tr bgcolor="#EEEEEE">
					<td bgcolor="#FFFFFF" colspan="7" align="right"><b>Total</b> &nbsp; </td>
					<td id="tdSumCashIn" align="right">
						<s:text name="format.money">
						    <s:param name="value" value="%{totalCashIn}"/>
						</s:text>
					</td>
					<td id="tdSumCashOut" align="right">
						<s:text name="format.money">
						    <s:param name="value" value="%{totalCashOut}"/>
						</s:text>
					</td>
					<td bgcolor="#FFFFFF" colspan="4">&nbsp;</td>
				</tr>
				<tr bgcolor="#EEEEEE">
					<td bgcolor="#FFFFFF" colspan="9" align="right"><b>Total</b> &nbsp; </td>
					<td id="tdSumBalance" align="right">
						<s:text name="format.money">
						    <s:param name="value" value="sumBalance"/>
						</s:text>
					</td>
					<td bgcolor="#FFFFFF" colspan="3">&nbsp;</td>
				</tr>
				</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<td height="50px" style="padding-left: 10px">
				<s:if test='#session["S_SHIFT_CLOSED"] == "Y"'>
					<input type="button" value=" Save " class="btnAction" style="width: 90px" disabled="disabled">
				</s:if>
				<s:else>
					<s:submit value=" Save " cssClass="btnAction" cssStyle="width: 90px"/>
				</s:else>
				&nbsp; &nbsp;
				<input type="button" value=" Cancel " class="btnAction" style="width: 90px" onclick="window.location='firstPage_execute.action';">
			</td>
			<td align="center" colspan="3">
				&nbsp;
			</td>
			<td align="right" style="padding-right: 10px">
				<s:if test='#session["S_SHIFT_CLOSED"] == "Y"'>
					<input type="button" value=" Close Shift " class="btnAction" style="width: 100px" disabled="disabled">
				</s:if>
				<s:else>
					<input type="button" value=" Close Shift " class="btnAction" style="width: 100px" onclick="closeShift()">
				</s:else>
			</td>
		</tr>
		</table>
		</s:form>
	</td>
</tr>
</table>
<br>
<div id="pnlLoading" style="visibility: hidden; background-color: #ffffff;">
    <div class="hd">Please wait ...</div>
    <div class="bd">
        <img src="${pageContext.request.contextPath}/images/loading.gif">
    </div>
    <div id="statusDiv" class="ft">&nbsp;</div>
</div>
<%--
<s:url id="hiddenManageShiftURL" value="hiddenManageShift.action" />
<sx:div id="hiddenManageShiftDIV" autoStart="false" parseContent="true" executeScripts="true"
        separateScripts="true" showLoadingText="false"
        href="%{hiddenManageShiftURL}" refreshOnShow="true"></sx:div>
--%>
</tiles:putAttribute>

</tiles:insertDefinition>
